<template>
  <div>
    <tips optionTemplate="diseaseTip"></tips>
    <div class="hearder-search">
      <el-col :span="24" class="breadcrumb-container input-val-box">
        <!--        <el-button size="small" type="primary" @click="addStudent()">添加学生异常档案</el-button>-->
        总 {{ page.total }} 条数据
      </el-col>
    </div>
    <!--本体列表，数据 -->
    <div class="table-body">
      <div class="table-body-box">
        <el-table
            ref="multipleTable"
            :data="arryList"
            :stripe="tableStyle.tableStripe"
            :border="tableStyle.tableBorder"
            tooltip-effect="dark"
            style="width: 100%"
            header-cell-class-name="table-text-c"
            cell-class-name="table-text-c">
          <el-table-column
              label="学生头像"
              width="90">
            <template slot-scope="scope">
              <viewerModle type="1" :imgSrc="scope.row.student.pic"></viewerModle>
            </template>
          </el-table-column>
          <el-table-column
              label="学生姓名"
              prop="name">
            <template slot-scope="scope">
              {{ scope.row.student ? scope.row.student.name : '--' }}
            </template>
          </el-table-column>
          <el-table-column
              label="所在班级">
            <template slot-scope="scope">
              {{ scope.row.classes ? scope.row.classes.class_name : '--' }}
            </template>
          </el-table-column>
          <el-table-column
              label="异常名称"
              prop="name">
          </el-table-column>
          <el-table-column
              label="异常时间">
            <template slot-scope="scope">
              {{`${scope.row.start_time}至${scope.row.end_time}`}}
            </template>
          </el-table-column>
          <el-table-column
              label="注意饮食">
            <template slot-scope="scope">
              <span v-if="scope.row.is_food==1">{{scope.row.food}}</span>
              <span v-else>无</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--工具条 分页-->
    <el-col :span="24" class="toolbar">
      <el-pagination
          background
          layout="total, prev, pager, next"
          :total="page.total"
          :page-size="page.pagesize"
          @current-change="handleSizeChange">
      </el-pagination>
    </el-col>
    <studentCaseAdd :visible.sync="detailVisible" :deviceId="deviceId" @beforePageFn="InitFn"></studentCaseAdd>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import studentCaseAdd from './studentCaseAdd'
import {diseaseIndex} from '@/api/admin/temporary_disease'

export default {
  components: {
    studentCaseAdd
  },
  data() {
    return {
      detailVisible: false,
      deviceId: 0,
      arryList: [], // 页面数据列表
      // 设置table样式
      tableStyle: tableoption,
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      }
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    async InitFn() {
      diseaseIndex({p: this.page.pageindex}).then(res => {
        console.log('kkkkkk:', res)
        if (!res.code) {
          this.arryList = this.getJson(res.list.data)
          this.page.total = res.list.total
        }
      })
    },
    getJson(item){
      return JSON.parse(JSON.stringify(item))
    },
    addStudent(row) {
      this.deviceId = row || '';
      this.detailVisible = !this.detailVisible;
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    }
  },
  mounted() {
  }
}
</script>
